# Passing data to ActionSheet

When using `SheetProvider` & `SheetManager` to show ActionSheet it becomes difficult to dynamically change the data in the ActionSheet. For example you are scrolling in a list and each tapping on each item should show properties of that item. One way would be to use some kind of state or events which is fine but not scalable when you have many sheets in the app.

ActionSheet for React Native provides a very easy way to do this by passing the data in your `show` function and getting it via prop in your ActionSheet component automatically.

Define the Sheet payload data when registering your Sheet.

```ts
import {SheetDefinition} from 'react-native-actions-sheet';

declare module 'react-native-actions-sheet' {
  interface Sheets {
    'example-sheet': SheetDefinition<{
      payload: {
        value: string;
      };
    }>;
  }
}
```

And then you can pass the data when showing the sheet:

```ts
SheetManager.show('example-sheet', {
  payload: {value: 'Hello World'},
});
```

And then in your `ExampleSheet` component.

```tsx
function ExampleSheet(props: SheetProps<'example-sheet'>) {
  return (
    <ActionSheet id={props.sheetId}>
      <View>
        <Text>{props.payload?.value}</Text>
      </View>
    </ActionSheet>
  );
}
```

You can also update the ActionSheet payload after is opened to trigger a rerender with new data.

```ts
SheetManager.update('example-sheet', {
  payload: {value: 'Happy New Year'},
});
```
